<template>
  <div class="wrapper flex">
    <div style="background: cornflowerblue; padding: 15px" class="w-96">
      <div
        v-for="item in leftDragList"
        :key="item.type"
        @dragstart="ondragstart($event, item)"
        draggable="true"
        style="width: 100%; height: 50px; background: #7f14d7; margin-bottom: 15px"
      >
        {{ item.text }}
      </div>
    </div>
    <div
      style="background: #bfcbd9"
      class="flex-auto"
      @dragenter="dragenter($event)"
      @dragover="ondragover($event)"
      @drop="ondrop($event)"
    >
      <template v-for="(item, index) in configList" :key="index">
        <center :itemData="item" />
      </template>
    </div>
  </div>
</template>

<script setup>
import center from './center.vue'
import portraitStore from '@/stores/modules/portrait.js'
import { storeToRefs } from 'pinia'
const dataPortraitStore = portraitStore()
const { configList, leftDragList } = dataPortraitStore
let { count } = storeToRefs(dataPortraitStore)
function ondragstart(e, dragData) {
  count.value++
  console.log('dragstart')
  console.log(e)
  e.dataTransfer.setData('info', JSON.stringify(dragData))
}
function ondragover(e) {
  // console.log(e)
  // console.log('over')
  e.preventDefault()
}
function dragenter(e) {
  console.log(e)
}
function ondrop(e) {
  e.preventDefault()
  // let data = e.dataTransfer.getData('info')
  let data = JSON.parse(e.dataTransfer.getData('info'))
  dataPortraitStore.$patch((state) => {
    state.configList.push(data)
  })
  console.log(data)
}
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: calc(100% - 40px);
  padding: 25px;
  background: aquamarine;
}
</style>
